<template>
    <div>
        <el-tag closable type="primary" effect="dark"
            style="border-radius: 0px; padding: 12px 10px; cursor: pointer; margin: 3px 0 3px 20px;">
            <span
                style="background-color: white; border-radius: 50%; width: 8px; height: 8px; display: inline-block;"></span>
            <span style="padding-left: 5px;">个人中心</span>
        </el-tag>
    </div>
    <hr>
    <div class="container">
        <div class="perMes">
            <p>个人信息</p>
            <div class="pMMain">
                <div></div>
                <p>
                <div>
                    <el-icon>
                        <UserFilled />
                    </el-icon>
                    <span>用户名称</span>
                </div>
                <div>surtr</div>
                </p>
                <p>
                <div>
                    <el-icon>
                        <Iphone />
                    </el-icon>
                    <span>手机号码</span>
                </div>
                <div>15888888888</div>
                </p>
                <p>
                <div>
                    <el-icon>
                        <Message />
                    </el-icon>
                    <span>用户邮箱</span>
                </div>
                <div>sr@qq.com</div>
                </p>
                <p>
                <div>
                    <el-icon>
                        <Histogram />
                    </el-icon>
                    <span>所属部门</span>
                </div>
                <div>研发部门/董事长</div>
                </p>
                <p>
                <div>
                    <el-icon>
                        <Avatar />
                    </el-icon>
                    <span>所属角色</span>
                </div>
                <div>超级管理员</div>
                </p>
                <p>
                <div>
                    <el-icon>
                        <Calendar />
                    </el-icon>
                    <span>创建日期</span>
                </div>
                <div>2024-6-30 11:27:11</div>
                </p>
            </div>
        </div>

        <div class="basMes">
            <p>基本资料</p>
            <div class="bMMain">

                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="基本资料" name="first">

                        <div>
                            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules"
                                label-width="auto" :size="formSize" status-icon>

                                <el-form-item label="用户昵称" prop="name" class="user pb20" size="large">
                                    <el-input v-model="ruleForm.name" />
                                </el-form-item>

                                <el-form-item label="手机号码" prop="number" :rules="[
                                    { required: true, message: 'age is required' },
                                    { type: 'number', message: 'age must be a number' },
                                ]" class="user">
                                    <el-input v-model.number="ruleForm.number" type="text" autocomplete="off"
                                        class="pb20" size="large" />
                                </el-form-item>

                                <el-form-item prop="email" label="邮箱" :rules="[
                                    {
                                        required: true,
                                        message: 'Please input email address',
                                        trigger: 'blur',
                                    },
                                    {
                                        type: 'email',
                                        message: 'Please input correct email address',
                                        trigger: ['blur', 'change'],
                                    },
                                ]" class="user" size="large">
                                    <el-input v-model="ruleForm.email" />
                                </el-form-item>

                                <div class="ptb30 pl40">
                                    <b style="color: #606266; font-size: 15px;">性别&nbsp;&nbsp;</b>
                                    <el-radio-group v-model="radio">
                                        <el-radio :value="1">男</el-radio>
                                        <el-radio :value="2" class="pl20">女</el-radio>
                                    </el-radio-group>
                                </div>

                                <el-form-item class="pl80">
                                    <el-button type="primary" @click="submitForm(ruleFormRef)" class="fs14">
                                        保存
                                    </el-button>
                                    <el-button type="danger" @click="resetForm(ruleFormRef)" class="fs14">关闭</el-button>
                                </el-form-item>
                            </el-form>
                        </div>

                    </el-tab-pane>

                    <el-tab-pane label="修改密码" name="second">
                        
                        <div>
                            <el-form ref="ruleFormRef1" style="max-width: 600px" :model="ruleForm1" :rules="rules"
                                label-width="auto" :size="formSize" status-icon>

                                <el-form-item label="旧密码" prop="oldPassword" class="user pb20" size="large">
                                    <el-input v-model="ruleForm1.name" type="password" placeholder="请输入旧密码"/>
                                </el-form-item>

                                <el-form-item label="新密码" prop="number" :rules="[
                                    { required: true, message: 'Please input the password' },
                                    /* { type: 'number', message: 'age must be a number' }, */
                                ]" class="user">
                                    <el-input v-model.number="ruleForm1.number" type="password" autocomplete="off"
                                        class="pb20" size="large" placeholder="请输入新密码"/>
                                </el-form-item>

                                <el-form-item prop="newPassword" label="确认密码" :rules="[
                                    {
                                        required: true,
                                        message: 'Please input the password',
                                        trigger: 'blur',
                                    },
                                   /*  {
                                        type: 'email',
                                        message: 'Please input correct email address',
                                        trigger: ['blur', 'change'],
                                    }, */
                                ]" class="user" size="large">
                                    <el-input v-model="ruleForm1.email" type="password" placeholder="请确认新密码"/>
                                </el-form-item>

                                <el-form-item class="pl80 mt30">
                                    <el-button type="primary" @click="submitForm(ruleFormRef)" class="fs14">
                                        保存
                                    </el-button>
                                    <el-button type="danger" @click="resetForm(ruleFormRef)" class="fs14">关闭</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-tab-pane>
                </el-tabs>


            </div>
        </div>
    </div>

</template>

<script setup>
import { reactive, ref } from 'vue';

const activeName = reactive('first');

let ruleForm = reactive({
    name : 'surtr',
    number : '15888888888',
    email : 'surtr@qq.com',
    pass : ''
})
let ruleForm1 = reactive({
    name : '',
    number : '',
    email : '',
    pass : ''
})

const ruleFormRef = ref();
const ruleFormRef1 = ref();
//对应用户昵称的prop="name"
const rules = reactive({
    name: [
        { required: true, message: 'Please input the password', trigger: 'blur' }
    ],
    oldPassword: [
        { required: true, message: 'Please input the password', trigger: 'blur' },
    ]
})



// console.log(ruleForm.name);
const radio = ref(2);
</script>

<style scoped>
*{padding: 0; margin: 0;}
.fs14{font-size: 13px; padding: 5px 15px;}
.pb20{padding-bottom: 20px;}
.ptb30{padding: 25px 0;}
.pl20{padding-left: 20px;}
.pl40{padding-left: 40px;}
.pl80{padding-left: 80px;}
.mt30{margin-top: 30px;}

.container{padding: 20px; display: flex; justify-content: space-between;}
.perMes{width: 293px; background-color: aliceblue; border-radius: 8px; color: rgb(60, 60, 60);}
.perMes>p{border-bottom: 0.5px solid rgb(215, 215, 215); padding: 14px 0 7px 15px;}
.pMMain{width: 253px; margin: 0 auto; overflow: hidden;}
.pMMain>div{background-image: url(../../imgs/sr.png); width: 150px; height: 150px; margin: 0 auto; background-size: contain; border-radius: 50%; margin-top: 20px; margin-bottom: 10px;}
.pMMain p{display: flex; justify-content: space-between; border-bottom: 0.5px solid rgb(215, 215, 215); padding: 11px 0;}
.pMMain p:nth-child(2){border-top: 0.5px solid rgb(215, 215, 215);}
.pMMain p:last-child{margin-bottom: 40px;}
.pMMain p div:last-child{font-size: 13px;}
.pMMain p div span{font-size: 13px;}

.basMes{width: 925px; background-color: #f0f8ff; border-radius: 8px; height: 420px;}
.basMes>p{border-bottom: 0.5px solid rgb(215, 215, 215); padding: 14px 0 7px 15px;}
.bMMain{width: 885px; margin: 0 auto; padding-top: 15px;}
/* .bMMain div span{font-size: 14px;} */
.user{font-weight: bold; width: 885px;}
</style>